<template>
	<view class="page-box bottom">
		<!-- <view class="header-box">
			<dropdownScreen v-if="showSearchCangku" :isNeedChangeTitle="true" :height="130" :itemHeight="100" :barFontSize="30" :itemFontSize="28" :listArr="searchArr" :itemArr="searchItemArr" @finish="cangkuClick" />
		</view> -->
		
		<view class="list-box">
			
			<view class="list-item" v-for="(item,index) in lists" :key="index" @click="goDetail(item)">
				<uni-swipe-action>
					<!-- 使用插槽 （请自行给定插槽内容宽度）-->
					<uni-swipe-action-item>
						<view class="list-item-content">
							<view class="username-type">
								<view class="username">操作人:{{item.username}}</view>
								<view class="type" :style="item.typeStyle">{{item.typeText}}</view>
							</view>
							<view class="name-count">
								<view class="name">{{item.name}}</view>
								<view class="count">{{item.count}}{{item.danwei}}</view>
							</view>
							<view class="label-hetong_sn">
								<view class="label">合同编号</view>
								<view class="hetong_sn">{{item.hetong_sn}}</view>
							</view>
							<view class="createtime">{{item.createtime}}</view>
						</view>
						
						<template v-slot:right>
							<view class="swipe-btn">
								<!-- <view class="edit-btn" @click="editFun(item)">
									编辑
								</view> -->
								<view class="del-btn" @click.stop="delFun(item.id)" v-if="userInfo && userInfo.ifdelete == '1'">
									删除
								</view>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
				
			</view>
		</view> 
		
		<view class="load-more" v-if="hasMore && showMore">
				加载中...
		</view>
		
		<view class="load-more" v-if="!hasMore">
				没有更多了~
		</view>
		
		<view class="bottom-btn" v-if="userInfo && userInfo.ifadd == '1'">
				<button type="primary" class="btn-confirm" size="mini" @click="createFun">新增库存</button>
		</view>
	</view>
</template>

<script setup>
	import SearchCom from "@/components/common/SearchCom/SearchCom.vue";
	import { GetCangKuMessageMingxiList, GetCangkuList, DlelteCangkuItem } from "@/configure/api/cangku.js"
	import {
	    onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import { computed, onMounted, ref, watch } from "vue"
	import { showSuccessMsg } from "@/utils/msg";
	import dropdownScreen from '@/components/common/dropdown-screen/dropdown-screen.vue'
	import { getUserInfo } from "@/utils/getUserInfo.js"
	
	const userInfo = ref()
	const pageNo = ref(1);
	const pageSize = ref(10);
	const total = ref(10);
	const showMore = ref(false);
	const showSearchCangku = ref(false);
	const searchArr = ref(['仓库'])
	const searchItemArr = ref([
		[]
	])
	const lists = ref([[]])
	
	const search = ref({
		cangkuid: '',
		name: ''
	})
	
	const typeArr = ['入库','出库']
	const typeStyleArr = ['color: var(--mainColor);','color: var(--dangerColor);']
	const getLists = (reload) => {
		
		showMore.value = true;
		
		if(reload){
			pageNo.value = 1
			lists.value = []
		}

		const opt = {pageNo: pageNo.value,pageSize: pageSize.value};
		
		// if(searchArr.value.length){
		// 	const cangku = searchItemArr.value[0].filter(v=>v.text == searchArr.value[0])[0]
		// 	opt.cangkuid = cangku.value
		// }
		
		Object.keys(search.value).forEach((v,i)=>{
			if(search.value[v]){
				opt[v] = search.value[v]
			}
		})

		GetCangKuMessageMingxiList(opt).then((data)=>{
			lists.value = [...lists.value,...data.data];
			lists.value = lists.value.map(v=>{
				return{
					...v,
					typeText: typeArr[parseInt(v.type)],
					typeStyle: typeStyleArr[parseInt(v.type)]
				}
			})
			let obj = {};
			
			lists.value = lists.value.reduce (function(item,next){
			
				obj[next.id] ? ' ' : obj[next.id]  = true && item.push(next)
				
				return item;
			
			},[]);
			
			total.value = parseInt(data.msg);
			showMore.value = false;
			uni.stopPullDownRefresh();
			
		})

		
	}
	
	const cangkuClick = (item) => {
		searchArr.value[0] = item.text
		getLists(true)
	}
	
	onPullDownRefresh(()=> {
		getLists(true);
	}) 
	
	const hasMore = computed(()=>{
		return pageNo.value * pageSize.value < total.value
	})
	
	onReachBottom(()=>{
		if(  hasMore.value && !showMore.value ){
			pageNo.value ++;
			getLists();
		}
		
	})
	
	const initFun = async() => {
		await GetCangkuListFun()
	}
	
	const GetCangkuListFun = async () => {
		let res = await GetCangkuList();
			res = res.data;
		// debugger
		if(res.length){
			searchArr.value[0] = res[0].name
			searchItemArr.value[0] = [...res.map(v=>{
				return{
					text: v.name,
					value: v.id
				}
			})]
			// debugger
			showSearchCangku.value = true
		}
		getLists(true)
	}
	
	const delFun = (id) => {
		uni.showModal({
		    title: '提示',
		    content: '确认删除?',
		    success: async function (res) {
		        if (res.confirm) {
					
					let res = await DlelteCangkuItem({id})
					if(res.code == 200){
						showSuccessMsg("删除成功!");
						getLists(true)
					}
					
		        } else if (res.cancel) {
		            
		        }
		    }
		});
	}
	
	onLoad((detail)=>{
		search.value.name = detail.name
		search.value.cangkuid = detail.cangkuid
		initFun()
	})
	
	onShow((detail)=>{
		getUserInfo().then((res)=>{
			userInfo.value = res;
		})
	})
	
	const createFun = () => {
		let { name, cangkuid } = search.value
		uni.navigateTo({url:`/pages/me/kucun-detail-add-edit/kucun-detail-add-edit?state=addMore&name=${name}&cangkuid=${cangkuid}`})
	}

</script>

<style lang="scss">
	
.screen-bar{
	.screen-bar-item{
		width: 50%!important;
	}
}
.page-box{
	.header-box{
		width: 100%;
		height: 130rpx;
		background-color: #fff;
		// padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		z-index: 999999;
		// display: flex;
		// flex-direction: row;
		// justify-content: space-between;
		// align-items: center;
	}
	
	.list-box{

		.list-item{
			background-color: #fff;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(209,217,225,0.36);
			border-radius: 8rpx;	
			margin-bottom: 32rpx;
			
			.list-item-content{
				padding: 40rpx 32rpx;
				box-sizing: border-box;
				
				.username-type{
					margin-bottom: 30rpx;
					@include flex(row,space-between,center);
					
					.username,.type{
						font-size: 28rpx;
						color: #16294B;
					}					
				}
				
				.label-hetong_sn{
					margin-bottom: 30rpx;
					@include flex(row,space-between,center);
					
					.label,.hetong_sn{
						font-size: 28rpx;
						color: #16294B;
					}		
				}
				
				.name-count{
					margin-bottom: 30rpx;
					@include flex(row,space-between,center);
					
					.name,.count{
						font-size: 28rpx;
						color: #16294B;
					}
				}
				
				.createtime{
					padding-top: 30rpx;
					border-top: 1px solid var(--borderColor);
					font-size: 28rpx;
					color: #16294B;
				}

			}
		}
		
		
	}
	
}


</style>
